HTML - Tags

Tags do HTML5 ( Continuadas )

TAG Funcionalidade Link
<!--...--> Define um comentário
<!DOCTYPE> Define o tipo de documento. No HTML 4 existiam três (3) diferentes tipos de doctype, mas no HTML 5 temos apenas um (1) tipo <!DOCTYPE HTML>. Define o tipo de documento e como o navegador deve interpretar suas tags.
<a> Define um hyperlink. Clicando nele você vai para um destino.
<abbr> Define uma abreviação ou uma sigla
<address> Define um endereço. Trata o conteúdo dentro da tag como uma seção
<area> Define uma área dentro de um mapa de imagem que pode ser definida como um link.
<b> Tag de formatação de Texto - Usar a CSS em seu lugar.
Define um texto importante, destacado, em negrito.
<base> Define uma base URL para todos os links da página
<bdo> Tag de formatação de Texto - Define a direção do texto
<blockquote> Define uma citação de um conteúdo longa
<body> Define o corpo da página, ou seja, onde estão todos os elementos que serão exibidos ao usuário
<br> Insere uma quebra de linha simples, como um CRLF num texto comum.
<button> Define um botão que ao ser clicado dispara um processo.
<caption> Define o título(caption) de uma tabela
<cite> Define uma citação
<code> Tag de formatação de Texto - Define o código texto do computador
<col> Define os atributos da coluna da tabela
<colgroup> Define um grupo de colunas da tabela - Semelhante a tag <tr>
<dd> Define uma descrição de definição
<del> Define um texto que não é mais válido e deve ser deletado.
<div> Define uma seção no documento
<dl> Define uma lista de definição
<dt> Define um termo de definição
<em> Tag de formatação de texto - Define um texto em ênfase
<fieldset> Define um conjunto de campos (fieldset)
<form> Define um formulário
<h1> até >h6> Define do cabeçalho 1 até o cabeçalho 6
<head> Define uma informação sobre o documento. (Não aceita mais elementos Child como filho)
<hr> Define uma regra horizontal. (Tem o mesmo nível que um parágrafo, mas também é utilizado para fazer separações e quebras de linha)
<html> Define um documento html
<i> Tag de formatação de texto - Define um texto em itálico. Para usuários de leitores de tela, o tom da voz utilizada é modificada para indicar ênfase.
<iframe> Define uma janela para outro documento no documento(frame)
<img> Define uma imagem
<input> Define um campo para entrada de dados pelo usuário.
Os imputs podem ser heckbox, color, Data, DateTime-Local, Email, File, Hidden(Escondido), Image, month, Number(Número), Password(Senha), Radio, Range, Reset, Search (Procurar, Pesquisar), Submit ( Enviar ao servidor ), tel (telefone), Text, Time, URL, Week (semana).
<ins> Tag de formatação de texto - Define um texto inserido
<kbd> Tag de Formatação de Texto - Define um texto do teclado
<label> Define uma "label" para o formulário
<legend> Define um título para os campos (fields)
<li> Define os itens da lista
<link> Define uma referência
<map> Define regiões de uma imagem que ao ser clicadas agem colo links
<menu> Define uma lista de "menus"
<meta> Define informações meta
<noscript> Define uma seção que tratará o evento porque o browser não suporta o script
<object> Define um objeto incorporado
<ol> Define uma lista ordenada
<optgroup> Define um grupo de opção
<option> Define uma opção em uma lista suspensa (drop-down list)
<p> Define um parágrafo
<param> Define um parâmetro para determinado objeto
<pre> Tag de formatação de texto - Define um texto pré-formatado
<q> Define uma citação curta
<s> Tag de formatação de texto - Define um texto que não é mais correto.
<samp> Tag de formatação de texto - Define o formato do texto como um código de amostra
<script> Define um script
<select> Define uma lista selecionável
<small> Tag de formatação de texto - Define um pequeno texto
<span> Define uma seção no documento
<strong> Tag de formatação de texto - Define um texto forte (similar ao negrito)
<style> Define um estilo que é um formato de exibição de um elemento como cor, tamanho, fundo etc.
<sub> Tag de formatação de texto - Define um texto subscrito
<sup> Tag de formatação de texto - Define um texto sobrescrito
<table> Define uma tabela
<tbody> Define o corpo da tabela
<td> Define uma célula da tabela
<textarea> Define um área de texto
<tfoot> Define o rodapé da tabela
<th> Define o cabeçalho da tabela
<thead> Define o cabeçalho da tabela
<title> Define o título do documento
<tr> Define uma linha da tabela
<ul> Define uma lista desordenada
<var> Define uma variável

Tags Descontinuadas

TAG Funcionalidade
<acronym> Define siglas em HTML 4.01. (Desenvolvedores preferem utilizar a tag <abbr>)
<applet> Define um miniaplicativo incorporado. (Ficou obsoleto em função da tag <object>)
<basefont> Tag de formatação de texto - Define as propriedads da font padrão para todo o texto do documento. (Apenas efeito visual)
<big> Tag de formatação de texto - Usado para tornar o texto maior. (Apenas efeito visual)
<center> Usado para alinhar texto e conteúdo no centro horizontal. (Apenas efeito visual)
<dir> Define a lista do diretório. (Ficou obsoleto em função da Tag <ul>)
<font> Tag de formatação de texto - Especifica o tipo de fonte, tamanho, e cor do texto. (Apenas efeito visual)
<frame> Define uma janela particular dentro de um conjunto de "frames". (Fere princípios de usabilidade e acessibilidade)
<frameset> Define um conjunto de frames organizado por múltiplas janelas.(Fere princípios de usabilidade e acessibilidade)
<noframes> Texto exibido para navegadores que não lidam com "frames". (Fere princípios de usabilidade e acessibilidade)
<strike> Tag de formatação de texto - Exibe texto rasurado. (Apenas efeito visual)
<tt> Tag de formatação de texto - Define teletipo de texto. (Apenas efeito visual)
<u> Tag de formatação de texto - Define sublinhado. (Apenas efeito visual)
<xmp> Tag de formatação de texto - Define texto pré-formatado. (Ficou obsoleto em função da tag <pre>)

Nota 1 : Estas tags devem funcionar no seu browser mas é altamente recomendável que você não as use porque no HTML6 elas poderão realmente não funcionar mais.

Nota 2: Algumas tags descontinuadas podem ou não funcionar no browser.

Nota 3 : As tags que foram descontinuadas possuem substitutas que executam a funcionalidade de maneira mais confiável e melhor. Por exemplo, ao colocar uma tag que usava o Flash Player o programador estava contando que o usuário já havia instalado o aplicativo na sua máquina senão o site simplesmente não funcionaria.

HTML 5 -Atributos Globais

TAG Funcionalidade Link
contenteditable Especifica se o usuário está autorizado a editar um conteúdo ou não: true|false (verdadeiro|Falso)
contextmenu especifica um menu contexto para um elemento - menu_id
draggable Especifica se um usuário tem permissão para arrastar um elemento: true|false|auto (verdadeiro|falso|automático)
dropzone especifica o que acontece quando um dado arrastado é solto: copy|move|link (copiar|mover|linkar)
hidden especifica que o elemento é oculto ou não é relevante: hidden (oculto)
spellcheck Especifica se o elemento deve ter sua grafia verificada: true|false (verdadeiro|falso)

Eventos


HTML 5 -Eventos de Janelas:

TAG Funcionalidade Link
onafterprint Ativada após o documento ser impresso.
onbeforeprint Ativada antes do documento ser impresso.
onbeforeonload Ativada antes do documento ser carregado.
onerror Ativada quando ocorre um erro.
onhaschange Ativada quando o documento sofre alteração.
onmessage Ativada quando uma mensagem é disparada.
onoffline Ativada quando o documento é desconectado da internet.
ononline Ativada quando o documento é conectado à internet.
onpagehide Executa quando a janela é ocultada.
onpageshow Executa quando a janela se torna visível.
onpopstate Executa quando ocorre alteração no histórico da janela.
onredo Executa quando é acionado o comando de repetir.
onresize Executa quando a janela tem alteração de tamanho.
onstorage Ativada quando um documento é carregado.
onundo Ativada quando é acionado o comando de desfazer.
onunload Executa quando o usuário sai do documento.

HTML 5 -Eventos de Formulários:

TAG Funcionalidade Link
oncontextmenu Ativada quando um menu de contexto é acionado
onformchange Ativada quando ocorre alterações no formulário
onforminput Ativada quando o usuário dá entrada no formulário
oninput Ativada quando um elemento dá entrada do usuário no formulário
oninvalid Ativada quando um elemento não é válido

HTML 5 - Eventos de Mouse:

TAG Funcionalidade Link
ondrag Ativada quando um elemento é arrastado
ondragend Ativada ao fim de uma operação de arrastar um elemento
ondragenter Ativada quando um elemento é arrastado e solto em seu destino
ondragleave Ativada quando um elemento é solto em um destino válido
ondragover Ativada quando elemento é arrastado e solto ao longo de um destino
ondragstart Ativada quando se inicia uma operação de arrastar
ondrop Ativada quando o elemento arrastado está sendo descartado
onmousewheel Ativada quando o scroll do mouse é girado
onscroll Ativada quando as barras de rolagem de um elemento está sendo rolada

HTML 5 -Eventos de Multimídia:

TAG Funcionalidade Link
oncanplay Ativada quando uma mídia está sendo iniciada a tocar.
onclanplaythrought Ativada quando a mídia está sendo tocada até o fim.
ondurationchange Ativada quando o comprimento da mídia é alterado.
onemptied Ativadado quando um elemento de recursos de mídia torna-se vazio.
onended Ativada quando a mídia chega ao fim.
onerror Ativada quando ocorre um erro de carregamento de um elemento.
onloadeddata Ativada quando os dados de mídia são carregados.
onloadedmetadata Ativada quando a duração de um elemento de mídia está sendo carregado.
onloadstart Ativada quando o navegador começa a carregar os dados de mídia.
onpause Ativada quando a mídia de dados está em pausa.
onplay Ativada quando a mídia de dados for começar a tocar.
onplaying Ativada quando a mídia começa a tocar.
onprogress Ativada quando o navegador está buscando os dados de mídia.
onratechange Ativada quando altera a faixa de mídia .
onreadystatechange Ativada quando ocorre uma mudança de estado.
onseeked Ativada quando o atributo de busca de um elemento não é verdadeiro.
onseeking Ativada quando o atributo de busca de um elemento é verdadeiro.
onstalled Ativada quando há um erro na busca de dados de mídia.
onsuspend Ativada quando o navegador para de buscar os dados da mídia.
ontimeupdate Ativada quando a posição da mídia é alterada.
onvolumechange Ativadar quando a mídia muda de volume e, também, quando o volume fica mudo.
onwaiting Ativadar quando a mídia para de tocar.

HTML5 - Novas Tags


HTML5 - Novas Tags de Layout

TAG Funcionalidade Link
<article> Define um artigo
<aside> Define o conteúdo além do conteúdo da página
<embed> Define o conteúdo interativo ou plugin externo
<figcaption> Define o caption de uma imagem
<figure> Define um grupo de média e seus titulos(captions)
<footer> Define o rodapé de uma página
<header> Define o cabeçalho de uma página
<nav> Define os links de navegação
<section> Define uma área ou seção
<wbr> Define uma possível quebra de linha

HTML5 - Novas Tags de Media

TAG Funcionalidade Link
<audio> Define o conteúdo de som
<source> Define recursos de mídia
<video> Define um vídeo

HTML5 - Novas Tags de Aplicativos Web

TAG Funcionalidade Link
<canvas> Define gráficos
<command> Define um botão de comando
<datagrid> Referências aos dados dinâmicos em Tree View ou tabelas;
<datalist> Define uma lista suspensa(DropDown)
<details> Define detalhes de um elemento
<output> Define os tipos de saída(outputs)
<progress> Informa graficamente o andamento da tarefa corrente ou que o usuário está aguardando terminar.

HTML5 - Novas Tags de Linguagem Ruby

TAG Funcionalidade Link
<rp> Define um tratamento substituto para elementos não suportados pelo ruby no browser.
<rt> Define explicações para idiomas estrangeiros(ruby) como pronuncia.
<ruby> Define as anotações em um idioma estrangeiro(ruby)

HTML5 - Novas Tags - Outros

TAG Funcionalidade Link
<dialog> Define uma caixa de diálogo ou janela
<hgroup> Define informações sobre uma determinada área do documento
<keygen> Define a key (chave) do formulário
<mark> Define o texto marcado / destacado
<meter> Define a medição dentro de um intervalo pré-definido
<summary> Define um resumo, uma súmula para um elemento detalhe(<details>)
<time> Define uma data ou hora

DOCTYPE - HTML4 e HTML5

A tag <DOCTYPE> é a primeira que aparece em um documento HTML e indica para o browser o tipo e versão do documento que está sendo aberto.

Na HTML5 o DOCTYPE ficou mais simples: <!DOCTYPE html>

Quanto ao HTML4 era um show de horres :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Onde : EN é o idioma da página, English. Coloque pt-BR para português.

HTML4 e HTML5 - Tags link de JS:

As listagens a seguir mostram como eram essas tags na HTML4.1 e como são agora na HTML5.

No HTML4 era assim : <script type="text/javascript" src="arquivo.js"></script>

E agora, na HTML5 : <script src="arquivo.js"></script>

HTML4 e HTML5 - Tags link de CSS:

As listagens a seguir mostram como eram essas tags na HTML4.1 e como são agora na HTML5.

No HTML4 era assim : <link rel="stylesheet" type="text/css" href="arquivo.css">

E agora, na HTML5: <link rel="stylesheet" href="arquivo.css">